import React, { memo, useState } from "react";
import { SongLyricStyle } from "./style";
import classNames from "classnames";

export default memo(function SongLyric(props) {
  const [disp, setDisp] = useState(false);

  const zkBtn = () => {
    setDisp(!disp);
  };

  return (
    <SongLyricStyle>
      <div className="lyric-box">
        <div className="zk-up">
          {props.lyricInfo
            ? props.lyricInfo.lrc.lyric
                .split("\n")
                .slice(0, 13)
                .map((item, index) => {
                  return <p key={index}>{item.split(/\[.*\]/)}</p>;
                })
            : ""}
        </div>
        <p onClick={zkBtn} className={classNames({ isClose: disp, zk: true })}>
          展开<i className="down-icon imgIcon"></i>
        </p>
        <div className={classNames({ isSelect: disp, zkDowm: true })}>
          {props.lyricInfo
            ? props.lyricInfo.lrc.lyric
                .split("\n")
                .slice(13)
                .map((item, index) => {
                  return <p key={index}>{item.split(/\[.*\]/)}</p>;
                })
            : ""}
          <p
            onClick={zkBtn}
            className={classNames({ isClose: !disp, zk: true })}
          >
            收起<i className="down-icon imgIcon"></i>
          </p>
        </div>
      </div>
    </SongLyricStyle>
  );
});
